/**
 * @description vue.config.js全局配置
 */
const path = require('path')
const Webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const resolve = dir => {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  indexPath: 'index.html',
  filenameHashing: false,
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true,
      },
    },
  },
  css: {
    requireModuleExtension: true,
    sourceMap: false,
    loaderOptions: {
      css: {
        modules: {
          // 定义模块化类名 hash值模式
          localIdentName: '[local]_[hash:base64:8]',
        },
      },
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`,
      },
    },
  },
  chainWebpack: config => {
    // 链式配置...
    config.resolve.symlinks(true)
    //去除console.log
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
    //移除预载插件
    config.plugins.delete('preload')
    //移除预取插件
    config.plugins.delete('prefetch')
    // 修改标题
    config.plugin('html').tap(args => {
      args[0].title = 'demo'
      args[0].minify = {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      }
      return args
    })
    config.module
      .rule('vabIcon', 'images')
      .test(/\.svg$/)
      .include.add(resolve('src/icon'))
      .end()
      .use('svg-sprite-loader', 'imageWebpackLoader')
      .loader('svg-sprite-loader', 'image-webpack-loader')
      .options({ symbolId: 'vab-icon-[name]' })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.devtool('eval-source-map')
      config.optimization.set('minimize', false)
    })
    config.when(process.env.NODE_ENV !== 'development', config => {
      config.performance.set('hints', false)
      config.devtool('none')
      config.optimization.splitChunks({
        automaticNameDelimiter: '-',
        chunks: 'all',
        minSize: 30 * 1024, // 当模块大于30kb时进行拆分
        minChunks: 1, // 模块引用的次数，只要>=3次就分割出来
        // 在满足 minChunks 基础上，还可以通过 maxInitialRequest/maxAsyncRequests 配置项限定分包数量
        maxAsyncRequests: 5, //按需加载时的最大并行请求数 超过5个就不分包
        maxInitialRequests: 3, // 入口点的最大并行请求数 入口文件不同请求超过3次不分包
        cacheGroups: {
          vendors: {
            chunks: 'all',
            name: 'vendor',
            test: /[\\/]node_modules[\\/]/,
            minChunks: 1,
            maxInitialRequests: 10,
            minSize: 0,
            priority: 80,
          },
          common: {
            chunks: 'all',
            test: /[\\/]src[\\/]js[\\/]/,
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60,
          },
          vue: {
            name: 'vue',
            test: /[\\/]node_modules[\\/](vue(.*)|core-js)[\\/]/,
            chunks: 'initial',
            priority: 100,
          },
          elementUI: {
            name: 'chunk-element-ui', // 设置 chunk 的名称
            priority: 100, // 权重需要大于 vendors 和 app 不然会被打包进 vendors 或者 app
            test: /[\\/]node_modules[\\/]element-ui[\\/]/, // 指定是 node_modules 下的 element-ui
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true,
          },
          default: {
            //其他重复的模块，如业务组件、自定义公共组件等
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
            chunks: 'all',
          },
        },
      })
    })
  },
  configureWebpack: {
    // 简单对象配置...
    devtool: process.env.NODE_ENV === 'development' ? 'source-map' : '',
    resolve: {
      alias: {
        '~': resolve('.'),
        '@': resolve('src'),
        _v: path.resolve(__dirname, './src/views'),
        _c: path.resolve(__dirname, './src/views/netDisk/components'),
        _a: path.resolve(__dirname, './src/assets/netDisk'),
        _r: path.resolve(__dirname, './src/views/netDisk/request'),
        _public: path.resolve(__dirname, './public'),
      },
    },
    plugins: [
      // 实例化HtmlWebpackPlugin，建议不使用此方法
      // new HtmlWebpackPlugin({
      //   filename: 'index.html',
      //   template: path.resolve(__dirname, './public/index.html'),
      //   title: 'demo', // 设置页面标题为'demo'
      //   BASE_URL: '/', //需要这里传参
      //   minify: {
      //     removeComments: true,
      //     collapseWhitespace: true,
      //     removeAttributeQuotes: true,
      //   },
      // }),
      new Webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery',
      }),
    ],
    // optimization: {
    //   usedExports: true,
    //   minimizer: [
    //     new UglifyJsPlugin({
    //       uglifyOptions: {
    //         // 删除注释
    //         output: {
    //           comments: false,
    //         },
    //         //生产环境自动删除console
    //         compress: {
    //           drop_debugger: true,
    //           drop_console: true,
    //           pure_funcs: ['console.log'],
    //         },
    //       },
    //       sourceMap: false,
    //       parallel: true,
    //     }),
    //   ],
    // },
  },
}
